<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugins/axios/axios.min.js"></script>
    <style>
        .login-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

<div id="app" class="login-container">
    <el-card>
        <h2 slot="header">登录</h2>
        <el-form :model="form" ref="form" label-width="80px">
            <el-form-item label="用户名" :error="usernameError">
                <el-input  v-model="form.username" placeholder="请输入用户名" required></el-input>
            </el-form-item>
            <el-form-item label="密码" :error="passwordError">
                <el-input type="password" v-model="form.password" placeholder="请输入密码" required></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
        <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                },
                errorMessage: '',
                usernameError: '',
                passwordError: ''
            }
        },
        methods: {
            login() {
                const formData = new URLSearchParams();
                formData.append('username', this.form.username);
                formData.append('password', this.form.password);
                // 清空错误消息
                this.errorMessage = '';
                this.usernameError = '';
                this.passwordError = '';
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        axios.post('/user/login', formData)
                            .then(response => {
                                if (response.data) {
                                    // 登录成功，重定向到 backend/index.html
                                    window.location.href = '/backend/index.html';
                                } else {
                                    // 登录失败，提示用户
                                    this.errorMessage = '用户名或密码错误';
                                }
                            })
                            .catch(error => {
                                console.error('登录请求错误:', error);
                                this.errorMessage = '登录请求失败';
                            });
                    } else {
                        this.errorMessage = '请填写所有必填字段';
                    }
                });
            }
        }
    });
</script>

</body>
</html>
